<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:replace="admin/header::header-fragment">
</header>
<body>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">ID</label>
          <div class="layui-input-block">
            <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-block">
            <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-block">
            <input type="text" name="email" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <select name="sex">
              <option value="0">不限</option>
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="layui-card-body">
      <div style="padding-bottom: 10px;">
        <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">删除</button>
<!--        <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>-->
      </div>
      <table id="LAY-user-manage" lay-filter="LAY-user-manage" class="demo"></table>
      <input type="hidden" name="password" value="{{d.password}}">
      <script type="text/html" id="imgTpl">
        <img style="display: inline-block; width: 50%; height: 100%;border-radius: 50%" src= {{ d.image }}>
      </script>
      <script type="text/html" id="layuiadmin-app-cont-tagsbar1">
        <input type="checkbox"  name="open" value="{{d.id}}" lay-skin="switch" lay-filter="Status" lay-text="通过|锁定" {{ d.status == 1 ? 'checked' : '' }}>
      </script>
      <script type="text/html" id="table-useradmin-webuser">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>修改密码</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>
    </div>
  </div>
</div>

<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table'], function(){
    var $ = layui.$
            ,form = layui.form
            ,table = layui.table;

//监听搜索
    form.on('submit(LAY-user-front-search)', function(data){
      var field = data.field;
      //暂时不写
    });
    var s = table.render({
      elem: '.demo'
      ,url: 'user/allUser',
      page: true //开启分页
      ,title: '用户数据表'
      ,cols: [
        [
          {type: 'checkbox',width:40},
          {field:'id', title:'用户ID', width:80,align:'center',unresize:true},
          {field:'username', title:'用户名', width:150,align:'center',unresize:true},
          {field:'image', title:'头像', width: 100,align:'center',toolbar: '#imgTpl',unresize:true},
          {field:'phone', title:'手机', width: 156,unresize:true},
          {field:'email', title:'邮箱', width:180,align:'center',unresize:true},
          {field:'sex', title:'性别', width:80,align:'center',unresize:true,templet: "<div>{{d.sex ? '男':'女'}}</div>"},
          {field:'createtime', title:'注册时间', width:180,align:'center',unresize:true,templet: "<div>{{layui.util.toDateString(d.classifyCreateTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
          {field:'right', title:'审核状态',toolbar:'#layuiadmin-app-cont-tagsbar1',unresize:true, width:100,align:'center',unresize: true},
          {field:'right', title:'操作',toolbar:'#table-useradmin-webuser',unresize:true, align:'center',width: 180}
        ]
      ]
      ,limits: [5,10,20,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
      ,limit: 5 //每页默认显示的数量
      ,parseData: function(res) { //res 即为原始返回的数据
        return {
          "code": 0, //解析接口状态
          "msg": "", //解析提示文本
          "count": res.count,
          data: res.data.items //解析数据列表
        };
      }
    });

    //控制审核
    form.on('switch(Status)', function(obj){
      var id = this.value;
      var status = obj.elem.checked?1:0;
      //请求接口
      $.post('user/updateUserStatus',{
        "id":id,
        "status":status
      },'json');
    });
    //事件
    var active = {
      batchdel: function(){
        var checkStatus = table.checkStatus('LAY-user-manage')
                ,checkData = checkStatus.data; //得到选中的数据
        if(checkData.length === 0){
          return layer.msg('请选择数据');
        }

        layer.prompt({
          formType: 1
          ,title: '敏感操作，请验证安全密码'
        }, function(value, index){
          layer.close(index);
          if ("admin"==value){
            layer.confirm('确定删除吗？', function(index) {
              $.ajax({
                url:'user/deleteUser',
                data:{"delete":JSON.stringify(checkData)},
                dataType:'json',
                method:'post',
                success:function (res) {
                  if (res.success){
                    layer.msg('删除成功', {
                      offset: '15px'
                      ,icon: 1
                      ,time: 1000
                    });
                  }else {
                    layer.msg('删除失败', {
                      offset: '15px'
                      ,icon: 1
                      ,time: 1000
                    });
                  }
                  table.reload('LAY-user-manage');
                }
                ,error: function(){
                  layer.alert('系统错误，请联系管理员！', {
                    icon: 2,
                    skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                  });
                }
              });
              table.reload('LAY-user-manage');
            });
          }else {
            layer.alert('安全密码错误，请联系管理员！', {
              icon: 2,
              skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
            });
          }

        });
      }
      ,add: function(){
        layer.open({
          type: 2
          ,title: '添加用户'
          ,content: 'userform.html'
          ,maxmin: true
          ,area: ['500px', '450px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submitID = 'LAY-user-front-submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);

            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
              var field = data.field; //获取提交的字段

              //提交 Ajax 成功后，静态更新表格中的数据
              //$.ajax({});
              table.reload('LAY-user-front-submit'); //数据刷新
              layer.close(index); //关闭弹层
            });

            submit.trigger('click');
          }
        });
      }
    };

//监听行工具栏
    table.on('tool(LAY-user-manage)',function (obj) {
      //获取行数据
      var data = obj.data;
      //点击删除
      if (obj.event === 'del'){
        layer.confirm('确定删除吗？', function(index){
          $.ajax({
            url:'user/deleteByIdUser',
            data:{"id":data.id},
            dataType:'json',
            method:'post',
            success:function (res) {
              if (res.success){
                layer.msg('删除成功', {
                  offset: '15px'
                  ,icon: 1
                  ,time: 1000
                });
              }else {
                layer.msg('删除失败', {
                  offset: '15px'
                  ,icon: 1
                  ,time: 1000
                });
              }
              table.reload('LAY-user-manage');
            }
            ,error: function(){
              layer.alert('系统错误，请联系管理员！', {
                icon: 2,
                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
              });
            }
          });
          layer.close(index);
        });
        //删除方法
      } else if (obj.event === 'edit'){
        layer.confirm('确定重置用户 【 '+data.username+' 】 的密码吗？', function(index){
          //点击编辑
          //点击编辑
          layer.open({
            //打开子窗口
            type: 2
            ,title: '重置密码',
            data:data
            ,content: 'admin/user/userPwd'
            ,area: ['450px', '200px'],
            btn: ['确定', '取消']  ,
            success:function (layero, index) {
              //打开子窗口后通过success赋值,两个变量基本是固定写法
              var body = layer.getChildFrame('body', index);
              var iframeWin = window[layero.find('iframe')[0]['name']];
              //给子窗口中的元素赋值
              body.find('input[name="tagss"]').val(data.classifyName);
            },yes: function(index, layero){
              //模板自带,固定写法,要注意子窗口中的提交按钮id对应submitID
              var iframeWindow = window['layui-layer-iframe'+ index]//得到iframe页的窗口对象，执行iframe页的方法：
                      ,submitID = 'LAY-user-front-submit'
                      ,submit = layero.find('iframe').contents().find('#'+ submitID);
              var body = layer.getChildFrame('body', index);
              var updatePwd = body.find('input[name="updatePwd"]').val()
              //监听提交
              iframeWindow.layui.form.on('submit('+ submitID +')', function(obj){
                $.ajax({
                  url:'user/updatePassWord',
                  data:{"id":data.id,"updatePwd":updatePwd},
                  dataType:'json',
                  method:'post',
                  success:function (res) {
                    if (res.success){
                      layer.msg('修改密码成功', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                      });
                    }else {
                      layer.msg('修改密码失败', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                      });
                    }
                    table.reload('LAY-user-manage');
                  }
                  ,error: function(){
                    layer.alert('系统错误，请联系管理员！', {
                      icon: 2,
                      skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    });
                  }
                });
                layer.close(index); //关闭弹层
              });
              submit.trigger('click');
            }
          });
        })

      }
    })

    $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });
</script>
</body>
</html>
